﻿
<script type="text/javascript">
    $('.chzn-drop').css('left', '0px');
    $('.chzn-drop').css('display', 'none');
    $('.chzn-single').on("click", function (e) {
        $(this).toggleClass('chzn-single-with-drop');
        $(this).next().toggleClass('visible');
        e.preventDefault();
    });
</script>

<style>

    .search-place-field{
        font-size: 1.3em;
    }

    .chzn-container a span, .chzn-results li{
        font-size: 1.3em;
    }


    .list-style .item{
        height: 17em;
        width:103%!important;
    }
    .chzn-container-single .chzn-single
    {
        background-color:white!important;
    }
     .visible {
        display: block !important;
    }

    .chzn-results li:hover {
        background-color: #df4a43;
        color: white;
    }

    .form-group {
        width: 89%;
        text-align: left;
        margin: 0 auto;
    }

    .btn-fullcolor {
        width: 150px;
    }

    #main, #main>.row {
	    height:100%;
    }

    #main>.row {
        /*overflow-y:scroll;*/
    }

    #left {
	    height:100%;
    }

    #map-canvas {
	    /*width:67.5%;
        height:calc(100% - 0);
        position:absolute;
        right:0px;
        top:5.65%;
        bottom:0;
        overflow:hidden;*/
    }


    #mapSearchContainer{
        overflow:hidden;
        /*max-height:650px;*/
    }

    .list-style .item .image img{
        height:125px;   
    }

    .list-style .item .price span
    {
        font-size:15pt;
    }

    .info h3{
        text-align:right;
    }

    @media only screen and (max-width: 500px) {
        #right{
            display:none!important;
        }

        .col-xs-8{
            width:100%!important;
        }
    }

</style>



<div>
 



    <div class="container-fluid" id="main">
   

       
        <div class="row" style="background-color: #f1f3f6;">
            <form>
                <div style="padding-top: 15px; padding-left: 15px;padding-bottom:20px;" class="form-group">
                    <!--<div class="form-control-large" style="vertical-align: top;">
                        <input type="text" class="form-control" name="location" placeholder="Road/Project Name">
                    </div>-->
                    <div class="form-control-large" style="vertical-align: top;">


                        <input type="text" 
                               class="form-control search-place-field"
                               places-auto-complete size=55
                               ng-model="vm.address"
                               component-restrictions="{country:'my'}"
                               types="['geocode']"
                               on-place-changed="onPlaceChanged()" />
                        </div>


                    <div class="form-control-small">
                        <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                            <a ng-click="propertyTransactChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                <span>{{ property.TransactName }}</span><div><b></b></div>
                            </a>
                            <div ng-show="propertyTransactChanged == true" class="chzn-drop" style="left:-9000px;">
                                <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                <ul class="chzn-results">
                                    <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateTransact('S',false)">Sale</li>
                                    <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateTransact('R',false)">Rent</li>
                                </ul>
                            </div>
                        </div>
                    </div>


                    <!--<div class="form-control-small">
                        <div id="search_prop_type_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 101.026px;" title="">
                            <a ng-click="propertyStateChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                <span>{{ property.StateName }}</span><div><b></b></div>
                            </a>

                            <div ng-show="propertyStateChanged == true" class="chzn-drop" style="left:-9000px;">
                                <div class="chzn-search">
                                    <input type="text" autocomplete="off">
                                </div>
                                <ul class="chzn-results">
                                    <li ng-repeat="state in states" id="search_prop_type_chzn_o_1" class="active-result" ng-mousedown="
                                            propertyStateId = state.StateId;
                                            propertyStateName = state.State;
                                            propertyStateChanged = false;
                                            changeState(propertyStateId,propertyStateName,false); ">{{ state.State }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>-->

                    <!--<div class="form-control-small">
                        <select id="search_status" name="search_status" data-placeholder="Status" class="chzn-done" style="display: none;">
                            <option value=""> </option>
                            <option value="sale">For Sale</option>
                            <option value="rent">For Rent</option>
                        </select>
                        <div id="search_status_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 77.4031px;" title="">
                            <a ng-click="propertyLocationChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                <span>{{ property.Location }}</span><div><b></b></div>
                            </a>
                            <div ng-show="propertyLocationChanged == true" class="chzn-drop" style="left:-9000px;">
                                <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                <ul class="chzn-results">
                                    <li ng-repeat="location in locations" id="search_status_chzn_o_1" class="active-result"
                                        ng-mousedown="
                                            updateLocation(location.Location,false);">{{ location.Location }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>-->

                    <div class="form-control-small">
                        <div id="search_bedrooms_chzn" class="chzn-container chzn-container-single chzn-container-single-nosearch" style="width: 38.199px;" title="">
                            <a ng-click="propertyTypeChanged = true" href="javascript:void(0)" class="chzn-single chzn-default" tabindex="-1">
                                <span>{{ property.TypeName }}</span><div><b></b></div>
                            </a>
                            <div ng-show="propertyTypeChanged == true" class="chzn-drop" style="left:-9000px;">
                                <div class="chzn-search"><input type="text" autocomplete="off"></div>
                                <ul class="chzn-results">
                                    <li id="search_bedrooms_chzn_o_1" class="active-result" ng-click="updateProperty('R',false)">Residential</li>
                                    <li id="search_bedrooms_chzn_o_2" class="active-result" ng-click="updateProperty('C',false)">Commercial</li>
                                    <li id="search_bedrooms_chzn_o_3" class="active-result" ng-click="updateProperty('I',false)">Industrial</li>
                                    <li id="search_bedrooms_chzn_o_4" class="active-result" ng-click="updateProperty('L',false)">Land</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <button style="font-size:1.3em;vertical-align: super" ng-click="search()" type="submit" class="btn btn-fullcolor" style="vertical-align: super;">Search</button>


                    <!--<div class="form-control-small">
                        <input type="text" class="form-control" name="project" ng-model="property.PriceMin" placeholder="Min Price (RM)" />
                    </div>-->

                    <!--<div class="form-control-small">
                        <input ng-model="property.PriceMax" type="text" class="form-control" name="project" placeholder="Min Price (RM)" />
                    </div>-->

                </div>
            </form>
        </div>

        <div id="mapSearchContainer" class="row">
       
            <div ng-show="is_mobile == false" id="mapSearchResult" class="col-xs-4" style="padding:20px;max-height: inherit;overflow-x: auto;">

                <h2>{{ totalItems }} Listings Found!</h2>
                <span us-spinner="{radius:15, width:4, length: 20}"></span>

                <div id="property-listing" class="list-style" style="margin-top:20px">
                    <div ng-repeat="p in searchData | filter: paginate" class="item col-md-4">
                        <!-- Set width to 4 columns for grid view mode only -->
                        <div class="image">
                            <!--<a href="properties-detail.html">
                    <span class="btn btn-default"><i class="fa fa-file-o"></i> Details</span>
                </a>-->
                            <a ng-if="isPropertyTransactSale(property.Transact)" ng-click="go(p.propertyid,p,property.Transact)" href="/property/{{ p.propertyid }}/S{{p.Zoning[0]}}">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Details</span>
                            </a>
                            <a ng-if="!isPropertyTransactSale(property.Transact)" ng-click="go(p.propertyid,p,property.Transact)" href="/property/{{ p.propertyid }}/R{{p.Zoning[0]}}">
                                <span class="btn btn-default"><i class="fa fa-file-o"></i> Details</span>
                            </a>


                            <img ng-if="!isEmpty(p.PropertyURL)" src="{{ p.PropertyURL }}" alt="">
                            <img ng-if="isEmpty(p.PropertyURL)" src="/images/penangrealty-logo.png" />
                        </div>
                        <div class="price">
                            <!-- <span ng-if="isPropertyTransactSale(property.Transact)"><i class="fa fa-home"></i>For Sale</span>
                            <span ng-if="!isPropertyTransactSale(property.Transact)"><i class="fa fa-home"></i>For Rent</span>
                            <span>RM {{ p.SalePrice | currency:"RM":0 }}</span>-->

                            <span ng-if="isSaleProperty == true"><i class="fa fa-home"></i>For Sale</span>
                            <span ng-if="isSaleProperty == true">{{ p.SalePrice | currency:"RM ":2 }}</span>

                            <span ng-if="isSaleProperty == false"><i class="fa fa-home"></i>For Rent</span>
                            <span ng-if="isSaleProperty == false"> {{ p.RentPrice | currency:"RM ":2 }}</span>


                        </div>
                        <div class="info">
                            
                            <h3>
                                <p>{{p.Distance | number:2 }}km away</p>
                                <a ng-if="isPropertyTransactSale(property.Transact)" ng-click="go(p.propertyid,p,property.Transact)" href="/property/{{ p.propertyid }}/SR">{{ p.LongHeading }}</a>
                                <a ng-if="!isPropertyTransactSale(property.Transact)" ng-click="go(p.propertyid,p,property.Transact)" href="/property/{{ p.propertyid }}/RR">{{ p.LongHeading }}</a>

                                <!--<small>{{ p.location }}, {{ p.state }}</small>-->
                            </h3>
                           

                            <!--<p>{{ p.ShortHeading }}</p>-->

                           
                        </div>
                        <ul class="amenities" style="border-top:1px solid #e7e7e7">
                            <li style="visibility:hidden"><i class="icon-area"></i></li><br/>
                            <li> Land Area <i class="icon-area"></i> {{ p.LandSqrtFt }} Sq Ft </li>
                            <li style="border-right:0px"> Built Area <i class="icon-area"></i> {{ p.BuildUp }} Sq Ft </li>

                            <!--<li><i class="icon-area"></i> {{ p.LandSqrtFt }} Sq Ft</li>-->
                            <li><i class="icon-bedrooms"></i> {{ p.Room }}</li>
                            <li><i class="icon-bathrooms"></i> {{ p.Bathroom }}</li>
                        </ul>

                    </div>
            
                </div> 

                <ul uib-pagination boundary-links="true" 
                    total-items="totalItems" 
                    ng-model="currentPage" 
                    items-per-age="numPerPage" 
                    max-size="6"></ul>


            </div>

            <div class="col-sm-12 col-xs-12 col-lg-8" ng-class="{'col-md-12': is_mobile == true}" style="padding:0px;">
                <div id="map-canvas">
                    <ng-map default-style="false" style="height:100%;" center="{{ latitude }}, {{ longitude }}" zoom="14">
                        <marker icon="{{customIcon}}" position="{{ latitude }}, {{ longitude }}"></marker>
                        <info-window id="foo" on-mouseover="mouseover()">
                            <div ng-non-bindable="" style="font-weight: bold">
                                {{store.LongHeading}}<br />
                                {{store.displayPrice | currency:"RM ":2}} <br />
                                Agent : {{store.agentname}}   HP: {{store.mobile}}
                                <a href="/property/{{store.propertyid}}/{{property.listType}}">View Detail</a>
                            </div>
                        </info-window>

                        <marker ng-repeat="location in searchData" 
                                id="id_{{location.propertyid}}"
                                position="{{location.Latitude}},{{location.Longitude}}" 
                                icon="images/PenangRealty_Icon.gif"
                                on-click="showProperty(event, location)" scaledSize="[5, 5]"></marker>

                        <!--<marker ng-if="property.Type == 'R'" ng-repeat="location in searchData" id="id_{{location.propertyid}}"
                                position="{{location.Latitude}},{{location.Longitude}}" icon="images/map-icons/residential.png"
                                on-click="showProperty(event, location)" scaledSize= "[5, 5]"></marker>

                        <marker ng-if="property.Type == 'C'" ng-repeat="location in searchData" id="id_{{location.propertyid}}"
                                position="{{location.Latitude}},{{location.Longitude}}" icon="images/map-icons/commercial.png"
                                on-click="showProperty(event, location)" scaledSize= "[5, 5]"></marker>

                        <marker ng-if="property.Type == 'I'" ng-repeat="location in searchData" id="id_{{location.propertyid}}"
                                position="{{location.Latitude}},{{location.Longitude}}" icon="images/map-icons/industrial.png"
                                on-click="showProperty(event, location)" scaledSize= "[5, 5]"></marker>

                        <marker ng-if="property.Type == 'L'" ng-repeat="location in searchData" id="id_{{location.propertyid}}"
                                position="{{location.Latitude}},{{location.Longitude}}" icon="images/map-icons/land.png"
                                on-click="showProperty(event, location)" scaledSize= "[5, 5]"></marker>-->

                        <!--<info-window id="bar" on-mouseover="mouseover()" visible-on-marker="currentProperty">
                            <div ng-non-bindable="" style="font-weight: bold">
                                Current Property <br />
                                {{property.Project}} <br />
                            </div>
                        </info-window>-->
                        <marker id="currentProperty" position="{{property.Latitude}},{{property.Longitude}}" on-click="map.showInfoWindow('bar')" icon="images/ListingIcon.gif" animation="BOUNCE" />


                    </ng-map>
                </div>
                <!--map-canvas will be postioned here-->
            </div>

        </div>
    </div>
</div>
<!--<div class="container-map">

    <div id="mapsearch-listing-results">
        <div class="listings-results-map">
            <div class="listing-list listings-page-results">
                <ul class="listing-items">
                    <li class="listing-item  listing-id-23066396 ">
                        <div class="row" itemscope="" itemtype="http://schema.org/Place">
                            <div class="listing-img img-thumbnail">
                                <a href="/property-listing/jalan-permas-jaya-11-permas-jaya-for-sale-by-samantha-koo-23066396?ref=ms%7Cnormal%7C1%7C1" title="For Sale - JALAN PERMAS JAYA 11 PERMAS JAYA" class="listing-img-a">




                                    <span class="listing-img-a-imgwrap lazy-bg-parent" itemscope="" itemtype="http://schema.org/Photograph">
                                        <img alt="For Sale - JALAN PERMAS JAYA 11 PERMAS JAYA" data-original="https://my1-cdn.pgimgs.com/listing/23066396/UPHO.89536514.C200X150/JALAN-PERMAS-JAYA-11-PERMAS-JAYA-Permas-Jaya-Malaysia.jpg" class="" content="https://my1-cdn.pgimgs.com/listing/23066396/UPHO.89536514.C200X150/JALAN-PERMAS-JAYA-11-PERMAS-JAYA-Permas-Jaya-Malaysia.jpg" itemprop="thumbnailUrl" onerror="this.src='https://cdn1.pgimgs.com/1480577595/sf2-search/bundles/guruweblayout/img/desktop/missing/nophoto_property_200x150.png';" src="https://my1-cdn.pgimgs.com/listing/23066396/UPHO.89536514.C200X150/JALAN-PERMAS-JAYA-11-PERMAS-JAYA-Permas-Jaya-Malaysia.jpg">
                                    </span>
                                </a>
                                <div class="row listing-img-footer">
                                    <a href="#" class="pgicon pgicon-photo" title="Photos"></a>
                                    <a href="#" class="pgicon pgicon-photo not-visible" title="Floorplans"></a>
                                    <a href="#" class="pgicon pgicon-youtube-play" title="Number of videos: "></a>
                                </div>
                            </div>
                            <div class="listing-info">
                                <h3>
                                    <a href="/property-listing/jalan-permas-jaya-11-permas-jaya-for-sale-by-samantha-koo-23066396?ref=ms%7Cnormal%7C1%7C1" title="For Sale - JALAN PERMAS JAYA 11 PERMAS JAYA" itemprop="url" target="_black">
                                        <span itemprop="name">JALAN PERMAS JAYA 11 PERMAS JAYA</span>
                                    </a>
                                </h3>
                                <ul class="listing-features">
                                    <li class="lst-details"><span class="lst-ptype">2-storey Terraced House</span> <span class="lst-tenure">Freehold</span></li>
                                </ul>
                                <p class="listing-location" itemscope="" itemtype="http://schema.org/PostalAddress"><span itemprop="streetAddress">JALAN PERMAS JAYA 11, Permas Jaya, Johor</span></p>
                                <ul class="listing-features">
                                    <li class="lst-sizes">2800 sqft <span class="mid-sep">·</span> RM&nbsp;200.00&nbsp;psf</li>
                                    <li class="lst-rooms"><span class="bed" title="4 Beds">4 <i class="pg-icon pgicon-bedroom"></i></span> <span class="bath" title="3 Baths">3 <i class="pg-icon pgicon-shower"></i></span></li>
                                </ul>
                            </div>
                            <div class="listing-values">
                                <div class="listing-values-pricing">
                                    <p class="listing-price">RM 560,000</p>
                                </div>
                                <div class="btn-tools"><a href="#shownumber" class="pgicon pgicon-phone js-agent-phone-number" title="View Contact Number" data-toggle="tooltip"><span class="agent-phone-number">+60 19 689 1689</span></a><a href="/property-listing/jalan-permas-jaya-11-permas-jaya-for-sale-by-samantha-koo-23066396?ref=ms%7Cnormal%7C1%7C1#contact-agent" class="pgicon pgicon-comment btn-agent-contact-mail" title="Message Agent" data-toggle="tooltip"><span class="sr-only">Message</span></a><a href="#shortlist" class="pgicon pgicon-heart btn-shortlist " title="Shortlist Property" data-toggle="tooltip" data-action-del="/shortlist/delete/23066396" data-action-add="/shortlist/add/23066396" data-listing-id="23066396"><span class="hidden-xs hidden-sm hidden-md">Shortlist</span></a></div>
                            </div>
                        </div>
                        <div class="row listing-footer">
                            <div class="listing-marketed">
                                <a href="/property-listing/jalan-permas-jaya-11-permas-jaya-for-sale-by-samantha-koo-23066396?ref=ms%7Cnormal%7C1%7C1#contact-agent" class="agent-name hidden-xs">Samantha Koo</a>
                                <span class="listing-recency">1 hour ago</span>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>

    <div map-lazy-load="https://maps.google.com/maps/api/js"
         map-lazy-load-params="{{googleMapsUrl}}">
        <ng-map options="{{options}}" style="height:100%;" center="5.383791, 100.400834" zoom="12">
            <marker icon="{{customIcon}}" position="{{ longitude }}, {{ latitude }}"></marker>
        </ng-map>
    </div>


 </div>-->
<!-- END CONTENT WRAPPER -->
